<template>
	<div>
		<!-- 导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card class="box-card">
			<!-- 搜索框 -->
			<el-row :gutter="40">
				<el-col :span="7">
					<el-input type="text" placeholder="请搜索姓名" v-model="query_info.query" clearable @clear="getuserlist()">
						<el-button slot="append" icon="el-icon-search" @click="getuserlist()">搜索</el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
				</el-col>
			</el-row>

			<!-- 列表 -->
			<el-table :data="userlist" border>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column label="姓名" prop="name"></el-table-column>
				<el-table-column label="密码" prop="password"></el-table-column>
				<el-table-column label="角色" prop="role"></el-table-column>
				<el-table-column label="操作">
					<!-- 功能按钮 -->
					<template v-slot="scope">
						<el-button type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)"></el-button>
						<el-button type="danger" icon="el-icon-delete" @click="showDeleteDialog(scope.row.id)"></el-button>
					</template>
				</el-table-column>

			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="query_info.page"
			 :page-sizes="[1, 2, 5, 10]" :page-size="query_info.page_num" layout="sizes, prev, pager, next, jumper" :total="pages_num*query_info.page_num">
			</el-pagination>

			<!-- 修改用户对话框 -->
			<el-dialog title="修改用户" :visible.sync="editDialogVisible" width="30%">
				<!-- 修改用户表单 -->
				<span>
					<el-form :rules="rulesFrom" label-width="65px" class="login_form" :model="upadteFormData" ref="updateRef">
						<el-form-item label="用户名" prop="name">
							<el-input placeholder="请输入用户名" v-model="upadteFormData.name"></el-input>
						</el-form-item>

						<el-form-item label="密 码" prop="password">
							<el-input placeholder="请输入密码" v-model="upadteFormData.password"></el-input>
						</el-form-item>

						<el-form-item label="角 色">
							<el-select v-model="updateValue" placeholder="请选择">
								<!-- lable显示在页面上的值，value是真实的值 -->
								<el-option v-for="item in updateOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

					</el-form>
				</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editDialogVisible = false;updateUser()">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 添加用户dialog -->
			<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="30%">
				<!-- 添加表单区域 -->
				<span>
					<el-form :rules="rulesFrom" label-width="65px" class="login_form" :model="addForm" ref="addRef">
						<el-form-item label="用户名" prop="name">
							<el-input placeholder="请输入用户名" v-model="addForm.name"></el-input>
						</el-form-item>

						<el-form-item label="密 码" prop="password">
							<el-input placeholder="请输入密码" v-model="addForm.password"></el-input>
						</el-form-item>

						<el-form-item label="角 色">
							<el-select v-model="value" placeholder="请选择">
								<!-- lable显示在页面上的值，value是真实的值 -->
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

					</el-form>
				</span>

				<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addDialogVisible = false;addUser()">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 删除用户对话框 -->
			<el-dialog title="删除用户" :visible.sync="deleteDialogVisible" width="30%">
				<span>确定删除用户吗？</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="deleteDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="deleteDialogVisible = false;deleteUser()">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				//添加对话框的隐藏显示
				userId: -1,
				deleteDialogVisible: false,
				addDialogVisible: false,
				editDialogVisible: false,
				// 搜索数据
				query_info: {
					"token": window.sessionStorage.getItem("token"),
					"page": 1,
					"page_num": 5,
					"query": ""
				},
				// 分页数据
				userlist: [],
				pages_num: 0,
				// 添加用户表单数据
				addForm: {
					"name": 'tom',
					"password": '000'
				},
				// 表单验证
				rulesFrom: {
					name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 10,
							message: '长度在 2 到 10 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: '长度在 2 到 20 个字符',
							trigger: 'blur'
						}
					]
				},
				options: [{
					value: 1,
					label: '我是商家'
				}, {
					value: 2,
					label: '我是用户'
				}],
				value: 1, //这里的1和options中的value值相对应
				upadteFormData: {
					"name": "",
					"password": ""
				},
				updateOptions: [{
					value: 1,
					label: '商家'
				}, {
					value: 2,
					label: '用户'
				}],
				updateValue: 1,
			}
		},
		created() {
			this.getuserlist();
		},
		methods: {
			async getuserlist() {
				const {
					data: res
				} = await this.$http.get('/userapi/list/', {
					params: this.query_info
				});
				if (res.status == 1000) {

					for (let item of res.user) {
						if (item.role == 0) {
							item.role = "管理员";
						} else if (item.role == 1) {
							item.role = "商家";
						} else if (item.role == 2) {
							item.role = "用户";
						}
						this.userlist = res.user;
					}

					this.pages_num = res.pages_num;
				} else {
					console.log("false");
				}
			},
			handleSizeChange(newPageSize) {
				// console.log(newPageSize);
				this.query_info.page_num = newPageSize;
				this.query_info.page = 1;
				this.getuserlist();
			},
			handleCurrentChange(current_page) {
				// console.log(current_page);
				this.query_info.page = current_page;
				this.getuserlist();
			},
			addUser() {
				this.$refs.addRef.validate(async (valida) => {
					if (!valida) return;
					let data = new FormData();
					data.append('name', this.addForm.name);
					data.append('password', this.addForm.password);
					data.append('role', this.value);
					// console.log(data);
					// this.formLogin
					const {
						data: res
					} = await this.$http.post("userapi/login/?action=register", data);
					console.log(res);
					if (res.status == 1000) {
						// console.log("添加成功");
						this.$message.success("添加用户成功");
					} else {
						this.$message.error("添加用户失败");
					}
				});
			},
			async showEditDialog(id) {
				this.editDialogVisible = true;
				// console.log(id);
				this.userId = id;
				const data = {
					"token": window.sessionStorage.getItem("token"),
					"uid": id
				}
				const {
					data: res
				} = await this.$http.get("userapi/detail/", {
					params: data
				});
				this.upadteFormData.name = res.user.name;
				this.upadteFormData.password = res.user.password;
				this.updateValue = res.user.role;
			},
			updateUser() {
				this.$refs.updateRef.validate(async (valida) => {
					if (!valida) return;
					let data = new FormData();
					data.append('name', this.upadteFormData.name);
					data.append('password', this.upadteFormData.password);
					data.append('role', this.updateValue);
					data.append('uid', this.userId);
					// console.log(data);
					const token = window.sessionStorage.getItem("token");
					const {
						data: res
					} = await this.$http.post("userapi/login/?action=update&token=" + token, data);
					// console.log(res);
					if (res.status == 1000) {
						// console.log("修改成功");
						this.$message.success("修改用户成功");
					} else {
						this.$message.error("修改用户失败");
					}
				})
			},
			showDeleteDialog(id) {
				this.deleteDialogVisible = true;
				console.log(id);
			},
			deleteUser() {
				
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 0.9375rem;
	}
</style>
